// 导航栏按钮
let toggle_btn = document.querySelector('#toggle');
// 导航栏
let header = document.querySelector('header');
let body = document.querySelector('body');

// 每一项的内容
let h2 = document.querySelectorAll('h2');

// 添加用户按钮
let add_btn = document.querySelector('#add-user');
// 右盒子
let right_box = document.querySelector('#main');
// 资金翻倍按钮
let double_btn = document.querySelector('#double');
// 查询百万富翁按钮
let million_btn = document.querySelector('#show-millionaire');
//财富榜按钮
let sort_btn = document.querySelector('#sort');
//计算总额按钮
let total_btn = document.querySelector('#calculate');

// todo:事件
//导航栏点击事件
toggle_btn.addEventListener('click', function () {
  toggle_btn_function();
});

// 添加账户点击事件
add_btn.addEventListener('click', function () {
  add_btn_function();
});

// 资金翻倍点击事件
double_btn.addEventListener('click', function () {
  double_btn_function();
});

// 百万富翁点击事件
million_btn.addEventListener('click', function () {
  million_btn_function();
});

// 财富榜点击事件
sort_btn.addEventListener('click', function () {
  sort_btn_function();
});

// 计算总额
total_btn.addEventListener('click', function () {
  total_btn_function();
});

// todo:功能模块
//导航栏按钮功能
function toggle_btn_function() {
  body.classList.toggle('show_nav');
}

let index = 0;

// 创建一个新的选择出来的成员数组
let newdataInfo = [];

//添加账户功能
function add_btn_function() {
  if (index == dataInfo.length) {
    return alert(`没有更多的数据了`);
  }
  let h2 = document.createElement('h2');
  let strong = document.createElement('strong');
  let span = document.createElement('span');

  right_box.appendChild(h2);
  h2.appendChild(strong);
  h2.appendChild(span);

  newdataInfo[index] = dataInfo[index];

  strong.innerText = `${dataInfo[index].name}`;
  span.append('$' + dataInfo[index].money.toLocaleString() + '.00');
  index++;
  console.log(newdataInfo);
}

// 资金翻倍功能
function double_btn_function() {
  // 改掉原来的数组
  dataInfo = newdataInfo;

  h2 = document.querySelectorAll('h2');

  //删除里面多余的元素
  for (let i = 2; i < h2.length; i++) {
    right_box.removeChild(h2[i]);
  }

  for (let k of dataInfo) {
    let h2 = document.createElement('h2');
    let strong = document.createElement('strong');
    let span = document.createElement('span');

    right_box.appendChild(h2);
    h2.appendChild(strong);
    h2.appendChild(span);

    k.money = k.money * 2;

    strong.innerText = `${k.name}`;
    span.append('$' + k.money.toLocaleString() + '.00');
  }
}

// 百万富翁功能
function million_btn_function() {
  h2 = document.querySelectorAll('h2');

  //删除里面多余的元素
  for (let i = 2; i < h2.length; i++) {
    right_box.removeChild(h2[i]);
  }

  console.log(h2);
  for (let k of dataInfo) {
    if (k.money >= 1000000) {
      let h2 = document.createElement('h2');
      let strong = document.createElement('strong');
      let span = document.createElement('span');

      right_box.appendChild(h2);
      h2.appendChild(strong);
      h2.appendChild(span);

      strong.innerText = `${k.name}`;
      span.append('$' + k.money.toLocaleString() + '.00');
    }
  }
}

//  财富榜功能
function sort_btn_function() {
  // 改掉原来的数组
  dataInfo = newdataInfo;

  h2 = document.querySelectorAll('h2');

  //删除里面多余的元素
  for (let i = 2; i < h2.length; i++) {
    right_box.removeChild(h2[i]);
  }

  let newarr = [];
  newarr = dataInfo;
  let change = 0;
  // 重新排序原来的数组大小
  for (let i = 0; i < newarr.length; i++) {
    for (let j = 1; j < newarr.length; j++) {
      if (newarr[j - 1]['money'] > newarr[j]['money']) {
        change = newarr[j];
        newarr[j] = newarr[j - 1];
        newarr[j - 1] = change;
      }
    }
  }

  for (let k of newarr) {
    let h2 = document.createElement('h2');
    let strong = document.createElement('strong');
    let span = document.createElement('span');

    right_box.appendChild(h2);
    h2.appendChild(strong);
    h2.appendChild(span);

    strong.innerText = `${k.name}`;
    span.append('$' + k.money.toLocaleString() + '.00');
  }
}

// 计算总额
function total_btn_function() {
  // 改掉原来的数组
  dataInfo = newdataInfo;

  let h2 = document.querySelectorAll('h2');

  //删除里面多余的元素
  for (let i = 2; i < h2.length; i++) {
    right_box.removeChild(h2[i]);
  }
  let sum = 0;
  for (let k of dataInfo) {
    h2 = document.createElement('h2');
    let strong = document.createElement('strong');
    let span = document.createElement('span');

    right_box.appendChild(h2);
    h2.appendChild(strong);
    h2.appendChild(span);

    sum += k.money;

    strong.innerText = `${k.name}`;
    span.append('$' + k.money.toLocaleString() + '.00');
  }

  h2 = document.createElement('h2');
  let strong = document.createElement('strong');
  let span = document.createElement('span');

  right_box.appendChild(h2);
  h2.appendChild(strong);
  h2.appendChild(span);

  strong.innerText = `总金额:`;
  span.append('$' + sum.toLocaleString() + '.00');
}
